<template>
  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
    <!-- eslint-disable-next-line -->
    <div>
      <img :src="avatar" class="pan-thumb" alt="用户头像">
    </div>

    <div class="over-avatar" @click="showUpload">更换头像</div>
    <my-upload  v-model="show"
                field="file"
                @crop-upload-success="cropUploadSuccess"
                :width="300"
                :height="300"
                :headers="header"
                :url="baseUrl + '/user/uploadAvatar'"
                img-format="png"></my-upload>
  </div>
</template>

<script>

  import Cookies from "js-cookie";
  import { baseUrl } from '@/utils/global'
  import myUpload from 'vue-image-crop-upload';

  export default {
    name: 'PanThumb',
    components: {
      myUpload
    },
    props: {
      image: {
        required: true
      },
      zIndex: {
        type: Number,
        default: 1
      },
      width: {
        type: String,
        default: '150px'
      },
      height: {
        type: String,
        default: '150px'
      }
    },
    data(){
      return {
        baseUrl: baseUrl,
        show: false,
        avatar: "",
        header:{
          Authorization:`Bearer ${Cookies.get('token')}`
        }
      }
    },
    methods:{
      showUpload(){
        this.show = !this.show;
      },
      getAvatar(){
        this.$api.user.findAvatar().then(
          res => {
            this.avatar = `data:image/png;base64,${res.data}`;
          }
        )
      },
      cropUploadSuccess	(){
        //重新获取头像，并刷新HeaderBar中的头像
        this.getAvatar();
        this.bus.$emit('refreshAvatar')
      }
    },
    mounted() {
      this.getAvatar();
    }
  }
</script>

<style scoped>
  .pan-item {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .pan-info-roles-container {
    padding: 20px;
    text-align: center;
  }

  .pan-thumb {

    width: 100%;
    height: 100%;
    /*background-position: center center;*/
    /*background-size: cover;*/
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 0;
    /*transform-origin: 95% 40%;*/
    /*transition: all 0.3s ease-in-out;*/
  }

  /* .pan-thumb:after {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
    top: 40%;
    left: 95%;
    margin: -4px 0 0 -4px;
    background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
  } */

  .pan-info {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
  }

  .pan-info h3 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2px;
    font-size: 18px;
    margin: 0 60px;
    padding: 22px 0 0 0;
    height: 85px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .pan-info p {
    color: #fff;
    padding: 10px 5px;
    font-style: italic;
    margin: 0 30px;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

  .pan-info p a {
    display: block;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 24px;
    margin: 7px auto 0;
    font-family: 'Open Sans', Arial, sans-serif;
    opacity: 0;
    transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
    transform: translateX(60px) rotate(90deg);
  }

  .pan-info p a:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  /*.pan-item:hover .pan-thumb {*/
  /*  transform: rotate(-110deg);*/
  /*}*/

  .pan-item:hover .pan-info p a {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }

  .over-avatar {
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 16px;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    text-align: center;
    background: rgba(0,0,0,0.5);
    cursor: pointer;
    z-index: 10;
    color: #fff;
  }
  .over-avatar:hover {
    opacity: 1;
  }
</style>

